<template>
  <card ref="Card">
    <div slot="header">
      <span>可用单号</span>
      <el-button class="float-right" @click="getData">刷新</el-button>
    </div>
    <div class="numberRange">
      <div v-for="item in usable" :key="item" class="mb-10">
        <span>{{item}}</span>
        <span>|</span>
      </div>
    </div>
  </card>
</template>

<script>
  import {getMyNumberApi} from '@/api/order/number'

  export default {
    name: "Usable",
    data() {
      return {
        formData: []
      }
    },
    computed: {
      usable() {
        if (this.formData.length === 0) {
          return '无'
        } else {
          let list = [];
          this.formData.forEach(item => {
            if (item.begin === item.end) {
              list.push(item.begin)
            } else {
              list.push(`${item.begin} ~ ${item.end}`)
            }
          });
          return list
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.$refs.Card.start();
        getMyNumberApi().then(result => {
          this.formData = result.resultParam.rangeDtoList;
          this.$refs.Card.stop();
        })
      }
    }
  }
</script>
